<template>
  <div id="topUp">
    <div class="topUp-nav">
      <div class="topUp-nav-left">
        <span>
          <svg style="margin-top:2px;width:20px;height:20px;" class="icon" aria-hidden="true">
            <use xlink:href="#iconjiantou" />
          </svg>
          <span @click="fanhui">返回</span>
        </span>
        <span>·装修个性化</span>
          <el-button v-if="urlPage==1" size="small" class="selects">{{urlName}}—首页</el-button>
          <el-button v-if="urlPage==2" size="small" class="selects">{{urlName}}—个人中心</el-button>
          <el-button v-if="urlPage==3" size="small" class="selects">{{urlName}}—自定义页面</el-button>
      </div>
      <div class="topUp-nav-right">
        <ul>
          <li v-show="$route.path=='/'">
            <svg style="width:20px;height:20px;" class="icon" aria-hidden="true">
              <use xlink:href="#iconshezhi1" />
            </svg>
            <span @click="pushGroup('nameless')">页面设置</span>
          </li>
          <li>
            <el-button @click.native="submit" size="mini" type="primary" style="margin-right:30px;">
              <span>保存并发布</span>
            </el-button>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { dragSave, getDragInfo,isDev} from "../../api/api";
import qs from "qs";
import { mapState, mapMutations } from "vuex";
export default {
  name: "top",
  data() {
    return {
      submitList: [],
      zhuangxiuPage:0,
      zhuangxiuId:0,
      zhuangxiDecodedName:''
    };
  },
  created() {
    this.zhuangxiuPage=localStorage.getItem('zhuangxiuPage');
    this.zhuangxiuId=localStorage.getItem('zhuangxiuId');
    this.zhuangxiDecodedName=localStorage.getItem('zhuangxiDecodedName');
    console.log('topUp',this.zhuangxiuPage, this.zhuangxiuId, this.zhuangxiDecodedName); // 输出: "1" "16" "默认首页"

    setTimeout(()=>{
      // 这里一进来就走接口，是因为从商户端传过来的数据先提交了一次接口(本地调试时 ，可以注释)
      // this.submit();
    },300)
  },
  computed: {
    ...mapState([
      "currentId",
      "currentName",

      "list",
      "pageSetting",
      "susBtn",
      "attention",
      "remind",
      "open",
      "menu",

      "urlId",
      "urlPage",
      "urlName"
    ]),
  },
  mounted() {
    setTimeout(()=>{
      this.init();
    },300)
  },
  methods: {
    ...mapMutations([
      "getCurrenChoose",
      "getCurrenChooseName",


      "getList",
      "getPageSetting",
      "getSusBtn",
      "getAttention",
      "getRemind",
      "getOpen",
      "getMenu",
    ]),
    //页面设置
    pushGroup(name) {
      this.getCurrenChoose(-1);
      this.getCurrenChooseName(name + "Change");
    },
    //保存
    submit() {
      this.submitList = {
        list: this.list,
        pageSetting: this.pageSetting,
        susBtn: this.susBtn,
        attention: this.attention,
        remind: this.remind,
        open: this.open,
        menu: this.menu,
      };
      console.log('this.submitList',this.submitList)
      var params = {
        body: this.submitList,
        page: this.urlPage?this.urlPagethis.urlPage:this.zhuangxiuPage,
        id:this.urlId?this.urlId:this.zhuangxiuId
      };
      dragSave(params).then((res) => {
        if (res.data.code == 1) {
          this.$message({
            message: "提交成功",
            type: "success",
          });
        }else{
          this.$message.error(res.data.msg);
        }
      });
    },
    fanhui(){
      // console.log('isDev11',isDev)
      const publishUrl = 'https://bkycms.com/addons/yb_wm/views/channel/index/index.html#/renovationindex';
      const backendPath = isDev ? publishUrl : location.href.match(/(\S*)views/)[1]+'views/channel/index/index.html#/renovationindex'; //如果是本地拿isDev域名
      window.open(backendPath, '_blank');
    },
    init() {
      var params = {
        page: this.urlPage?this.urlPagethis.urlPage:this.zhuangxiuPage,
        id:this.urlId?this.urlId:this.zhuangxiuId
      };
      getDragInfo(params).then((res) => {
        if(res.data.code==1){
          let number = res.data.data.body ;
        if(number==null) return
        if (number.list == undefined ) {
          this.getList(JSON.stringify([]));
          return false;
        }else{
          this.getList(JSON.stringify(number.list));
        }
        this.getPageSetting(JSON.stringify(number.pageSetting));
        this.getSusBtn(JSON.stringify(number.susBtn));
        this.getAttention(JSON.stringify(number.attention));
        this.getRemind(JSON.stringify(number.remind));
        this.getOpen(JSON.stringify(number.open));
        this.getMenu(JSON.stringify(number.menu));
        }else{
          this.$message.error(res.data.msg);
        }
      });
    },
  },
};
</script>


<style lang="less" scoped>
@import '~@/assets/css/base.less';
/deep/.el-input__inner {
  background-color: #3f485d;
  border: 1px solid #3f485d;
  color: #fff;
}
#topUp {
  width: 100%;
  .topUp-nav {
    width: 100%;
    height: 66px;
    background-color: #1e222b;
    display: flex;
    justify-content: space-between;
    .topUp-nav-left {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      color: #fff;
      > span:nth-of-type(1) {
        display: flex;
        justify-content: flex-start;
        align-content: center;
        padding-right: 20px;
        cursor: pointer;
        > span {
          margin-left: 5px;
        }
      }
      > span:nth-of-type(2) {
        margin-right: 30px;
      }
      .selects {
        width: 200px;
         color: #fff;
          background-color: #3f485d;
          border-color: #3f485d;
          text-align: left;
      }
    }
    .topUp-nav-right {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      > ul {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        > li {
          margin-left: 40px;
          color: #fff;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          cursor: pointer;
          > span {
            margin-left: 5px;
          }
          /deep/.el-button--primary {
            background-color: @mainColor;
            border-color: @mainColor;
          }
        }
      }
    }
  }
}
</style>
